<div id="main_container">

	{$oZoneHeader}
    
    <div class="main_content">
        {$oZoneTopMenu}
        <div class="center_content">  
            <div class="left_content">
                {$oZoneLeftMenu}
                <p style="width:100%;clear:both;"><strong><H1>DOSSIER</H1></strong></p>
                <h1>{$dossier->dossier_name}</h1>

                
                {if !$dossier->dossier_id}
                    <h4>Les dossiers : </h4> 
                    {if sizeof($liste)}
                    {literal}
                    <script>
                        $(function() {
                            $( "#sortable" ).sortable({ opacity: 0.6, cursor: 'move', update: function() {
                                    var order = $(this).sortable("serialize") ;
                                    $.post("{/literal}{jurl 'essais~BoDossier:reOrder', array(), false}{literal}", order);
                                }
                            });
                            $( "#sortable" ).disableSelection();
                        });
                    </script>                    
                    {/literal} 
                    <ul id="sortable">
                        {foreach $liste as $item}
                        <li title="Glisser pour ré ordoner" id="tiFicheIds_{$item->dossier_id}" class="ui-state-default">
                            <label><a title="Editer" href="{jurl 'essais~BoDossier:index', array('dossierId'=>$item->dossier_id), false}">{$item->dossier_name}</a></label>
                            <a href="{jurl 'essais~BoDossier:supprimer', array('id'=>$item->dossier_id)}" class="ask" style="float:right;"><img src="{$j_basepath}design/back/img/user_logout.png" alt=""></a>
                        </li>
                        {/foreach}
                    </ul>
                    {/if}
                    <br />
                {/if}
                <!-- LES CHAPITRES D UN DOSSIER-->
            
            {if $dossier->dossier_id}
                <div id="gammeMenu" style="clear:both;">
                    <a href="{jurl 'essais~BoDossier:chapitre', array('dossierId'=>$dossier->dossier_id)}" title="" class="c1">CHAPITRES</a>
                    <br />
                    {if sizeof($chapitre)}
                    {literal}
                    <script>
                        $(function() {
                            $( "#sortablechapitre" ).sortable({ opacity: 0.6, cursor: 'move', update: function() {
                                    var order = $(this).sortable("serialize") ;
                                    $.post("{/literal}{jurl 'essais~BoDossier:reOrderChap', array(), false}{literal}", order);
                                }
                            });
                            $( "#sortable" ).disableSelection();
                        });
                    </script>                    
                    {/literal} 
                        <ul id="sortablechapitre">
                        {foreach $chapitre as $item}
                            <li title="Glisser pour ré ordoner" id="tiChapIds_{$item->chap_id}" class="ui-state-default chap">
                            <a href="{jurl 'essais~BoDossier:chapitre', array('dossierId'=>$dossier->dossier_id,'chapId'=>$item->chap_id)}" style="margin-left:5px;">{$item->chap_name}
                            {if is_array($item->chap_img) && sizeof($item->chap_img)}
                            <ul>
                                {foreach $item->chap_img as $itemImg}
                                {if $itemImg}
                                <li><a href="javascript:void(0)" onclick="document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'" id="{$itemImg}" class="img-pop">{$itemImg|basename}</a></li>
                                {/if}
                                {/foreach}
                            
                            </ul>
                            {else}
                                <ul>
                                
                                <li><a href="javascript:void(0)" onclick="document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'" id="{$item->chap_img}" class="img-pop">{$item->chap_img|basename}</a></li>  
                            
                                </ul>
				            {/if}
                            </li>
                        {/foreach}
                        </ul>
                    {else}
                        <p>Aucun chapitre pour ce dossier</p>
                    {/if}
                  </div>
                {/if}
            <!-- /LES CHAPITRES D UN DOSSIER-->
            </div>
    
        <form id="createForm" class="Gmodeles" action="{jurl 'essais~BoDossier:saveChapitre'}" method="POST">
            <div class="right_content">
                <h2>Ajouter / Modifier un chapitre</h2> 
                  <input type="hidden" name="dossierId" value="{$dossierId}">
                  <input type="hidden" name="chap_id" value="{$chapitre1->chap_id}">
                  <dl>
                    <dt><label>Titre : </label></dt>
                    <dd><input type="text" value="{$chapitre1->chap_name}"  class="required"  name="chap_name"/></dd>
                  </dl>
                  <dl style="height:auto">
                    <dt><label>Texte : </label></dt>
                    <dd style="width:600px;">
                        <textarea id="chap_content" name="chap_content" >{$chapitre1->chap_content}</textarea>
                        <script type="text/javascript">
                            {literal}CKEDITOR.replace( 'chap_content', {width:'600px', toolbar:'AOToolbar'}) ;{/literal}
                        </script>
                    </dd>
                  </dl>
                  <dl style="height:auto">
                    <dt><label>Illustrations stockées : </label></dt><br />
                                      
                    <!-- photos  -->
                    <div class="wrap">
                        <div class="p1">
                            <input type="hidden" name="photo-annonce" value="{if sizeof($tempImgChap)}{foreach $tempImgChap as $key=>$item}{if ($key >0)},{/if}{$item}{/foreach}{/if}" id="photo-annonce" />
                            <div class="upload_image">
                                <img src="{$j_basepath}design/front/images/no_image.jpg" id="thumb" alt="no image"/>
                                <!--chemin du fichier-->
                                <input type="text" id="fic" name="fic"  class="nom" readonly="true" value=""/>
                                <!-- Upload Button-->
                                <div id="upload" class='btn_upload'>Parcourir</div>
                                <span id="status" >
                                    <img src="{$j_basepath}design/front/images/loading.gif" class="loading"  alt="no image"/>
                                    <p></p>
                                </span> 
                            </div>
                            <!-- open kcfinder -->
                            <input type="hidden" value="{$path_img}" id="path_img" />
                            {literal}
                            <script type="text/javascript">

                                function openKCFinder(field) {
                                    window.KCFinder = {
                                        callBack: function(url) {
                                            window.KCFinder = null;
                                            // field.value = url;
                                            field.val(url) ;
                                            addImageinCarousel(url);
                                        }
                                    };
                                    img_path = $("#path_img").val();
                                    window.open(j_basepath+'kcfinder/browse.php?type=images&dir='+ img_path, 'kcfinder_textbox',
                                        'status=0, toolbar=0, location=0, menubar=0, directories=0, ' +
                                        'resizable=1, scrollbars=0, width=800, height=600'
                                    );
                                }
                                $(function(){
                                    var cible = $('#fic');
                                    imageName = cible.val();
                                    $('#upload').click(function(){
                                        openKCFinder (cible) ;
                                    });
                                    
                                });
                            </script>
                            {/literal}
                            <!-- fin kcfinder -->

                        </div>

                        <!--begin gallery-->
                       <div class="infiniteCarousel">
                            <div class="wrapper">
                                <ul>
                                    {if sizeof($tempImgChap)}
                                        {foreach $tempImgChap as $item2}
                                             <li>
                                                    <img src="{$item2}" title="{$item2}" width="84" />
                                                    <img src="{$j_basepath}design/front/images/DeleteRed.png" class="deleteImage" title="Supprimer cette image" />
                                             </li>
                                        {/foreach}
                                    {/if}
                                </ul>        
                            </div>
                        </div>
                        <!--end gallery-->

                        <div class="clear">&nbsp;</div>
                    </div>
                    <!-- finphotos  -->
                    
                  </dl>
                  
                 <dl class="submit">
                   <input class="valider" title="Valider" type="submit" value="" style="margin-right:10px;" />
                   <a title="Annuler" href="{jurl 'essais~BoDossier:index'}" class="bt_green" ><span class="bt_green_lft"></span><strong>Annuler</strong><span class="bt_green_r"></span></a>
                 </dl>  

                </div><!-- end of right content-->
            </form>
           
        </div>   <!--end of center content -->               

        <div class="clear"></div>
    </div> <!--end of main content-->
	
    
    <div class="footer">
    </div>

</div>	
<!-- popup de l'image d'une version-->
<div id="light" class="white_content">
		<a class="close" href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">Fermer</a>
			<div class="apercu1" id="apercu"><img src="" alt="" id="apecu-img"></div>
</div>
<div id="fade" class="black_overlay"></div>

{literal}

    <script type="text/javascript">
        $(function () {
            $('#showChapitre').click(function () {
                $('#chapitre').show();
                $(this).hide();
            });

            // popup image dans version
            $('.img-pop').click(function () {
                image = $(this).attr('id')
                $('#apecu-img').attr('src', image);
            });
        });
    </script>
{/literal}
